<script setup lang="ts">
import { useRoute } from 'vue-router';
import { getDetail } from '../../api/detail'
import { reactive, ref, Ref } from 'vue';
import { iDetail } from '../../utils/detailType'
import { showImagePreview } from 'vant'
const route = useRoute()

// console.log(route.params.proid);
// console.log(route.query.proid);

let state: { detail: iDetail } = reactive({
  detail: {}
})

getDetail({ proid: String(route.query.proid) }).then(res => {
  res.data.data.banners = res.data.data.banners[0].split(',')
  console.log(res.data.data);
  state.detail = res.data.data

})


// 记录当前在哪张图片上
const currentCount: Ref<number> = ref(0)

function showImage() {
  showImagePreview({
    images: state.detail.banners,
    startPosition: currentCount.value,
    onChange(index: number) {
      // 当前图片预览的索引值
      // console.log(index);
      currentCount.value = index
    }
  })
}
// 轮播图每次切换后执行
function changeImage(index: number) {
  // index 是我们轮播图当前的索引值
  // console.log(index);
  currentCount.value = index
}

</script>
<template>
  <div class="box">
    <header class="header">
      <span class="back" @click="$router.back()">
        <van-icon name="arrow-left" />
        返回
      </span>
      详情

    </header>
    <div class="content">

      <div class="my-detail-swipe">
        <van-swipe class="my-swipe" @change="changeImage" :initial-swipe="currentCount" :autoplay="3000"
          @click="showImage" indicator-color="#f66">
          <van-swipe-item v-for="item in state.detail.banners" :key="item">
            <img :src="item" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>

    </div>
  </div>
</template>
<style scoped lang="scss">
.header {
  position: relative;

  .back {
    position: absolute;
    left: 10px;
  }
}

.my-swipe .van-swipe-item {
  height: 380px;
  line-height: 380px;
  text-align: center;
}

.my-swipe img {
  width: 100%;
  height: 100%;
}
</style>
